<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 路由滚动位置管理</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            min-height: 100vh;
            padding: 20px;
            color: #fff;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
        }

        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .main-content {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }

        .nav-panel {
            flex: 1;
            min-width: 300px;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
        }

        .content-panel {
            flex: 2;
            min-width: 500px;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            height: 70vh;
            overflow: auto;
            position: relative;
        }

        .nav-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 20px;
        }

        .nav-btn {
            padding: 15px 20px;
            background: rgba(255, 255, 255, 0.15);
            border: none;
            border-radius: 10px;
            color: white;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-3px);
        }

        .nav-btn i {
            font-size: 1.4rem;
        }

        .history-btn {
            background: rgba(255, 255, 255, 0.1);
        }

        .nav-indicator {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        .indicator {
            padding: 15px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 10px;
            text-align: center;
            flex: 1;
        }

        .indicator h3 {
            margin-bottom: 10px;
            font-size: 1.1rem;
            color: #ffcc00;
        }

        .indicator p {
            font-size: 1.8rem;
            font-weight: bold;
        }

        .page-content {
            min-height: 2000px;
            padding: 20px;
        }

        .section {
            margin-bottom: 40px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }

        .section h2 {
            margin-bottom: 15px;
            color: #4dabf7;
        }

        .scroll-marker {
            position: absolute;
            right: 30px;
            top: 30px;
            padding: 10px 15px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            font-weight: bold;
            color: #ffcc00;
        }

        .position-list {
            margin-top: 20px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            max-height: 200px;
            overflow-y: auto;
        }

        .position-item {
            padding: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .position-item:last-child {
            border-bottom: none;
        }

        .key {
            color: #ffcc00;
            font-weight: bold;
        }

        .value {
            color: #4dabf7;
        }

        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
        }

        @media (max-width: 900px) {
            .main-content {
                flex-direction: column;
            }

            .content-panel {
                min-width: auto;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <header>
            <h1>Vue3 路由滚动位置管理</h1>
            <p class="subtitle">本示例演示了如何保存和恢复页面滚动位置，包括前进、后退和新路由导航的场景。系统会记录每个页面的滚动位置，并在用户返回或前进时恢复。</p>
        </header>

        <div class="main-content">
            <div class="nav-panel">
                <h2>导航控制</h2>
                <div class="nav-buttons">
                    <button @click="navigateTo('/page1')" class="nav-btn">
                        <span>📄 页面一</span>
                    </button>
                    <button @click="navigateTo('/page2')" class="nav-btn">
                        <span>📊 页面二</span>
                    </button>
                    <button @click="navigateTo('/page3')" class="nav-btn">
                        <span>📈 页面三</span>
                    </button>
                    <button @click="navigateTo('/page4')" class="nav-btn">
                        <span>📋 页面四</span>
                    </button>
                </div>

                <div class="nav-buttons">
                    <button @click="goBack" class="nav-btn history-btn" :disabled="historyIndex <= 0">
                        <span>◀ 后退</span>
                    </button>
                    <button @click="goForward" class="nav-btn history-btn" :disabled="historyIndex >= routeHistory.length - 1">
                        <span>前进 ▶</span>
                    </button>
                </div>

                <div class="nav-indicator">
                    <div class="indicator">
                        <h3>当前导航类型</h3>
                        <p>{{ navigationType || '初始导航' }}</p>
                    </div>
                    <div class="indicator">
                        <h3>历史记录索引</h3>
                        <p>{{ historyIndex }}</p>
                    </div>
                </div>

                <div class="position-list">
                    <h3>保存的滚动位置:</h3>
                    <div v-for="(pos, path) in scrollPositions" :key="path" class="position-item">
                        <span class="key">{{ path }}:</span>
                        <span class="value">{{ pos }}px</span>
                    </div>
                </div>
            </div>

            <div class="content-panel" ref="contentPanel">
                <div class="scroll-marker">滚动位置: {{ currentScrollPosition }}px</div>
                <div class="page-content">
                    <router-view></router-view>
                </div>
            </div>
        </div>

        <footer>
            <p>Vue3 路由滚动位置管理示例 | 使用 Vue Router 导航守卫和滚动行为控制</p>
        </footer>
    </div>
</div>

<script>
    const { createApp, ref, onMounted, onUnmounted, nextTick } = Vue;
    const { createRouter, createWebHistory } = VueRouter;

    // 页面组件
    const Page1 = {
        template: `
        <div class="section">
          <h2>页面一 - 产品介绍</h2>
          <p>这是我们的旗舰产品，提供全方位的解决方案...</p>
        </div>
        <div class="section">
          <h2>核心功能</h2>
          <p>详细描述产品的各项功能...</p>
        </div>
        <div class="section">
          <h2>技术规格</h2>
          <p>产品的技术参数和规格说明...</p>
        </div>
        <div class="section">
          <h2>用户评价</h2>
          <p>来自客户的真实反馈...</p>
        </div>
        <div class="section">
          <h2>常见问题</h2>
          <p>用户最常遇到的问题解答...</p>
        </div>
      `
    };

    const Page2 = {
        template: `
        <div class="section">
          <h2>页面二 - 数据分析</h2>
          <p>展示最新的业务数据和分析结果...</p>
        </div>
        <div class="section">
          <h2>月度报告</h2>
          <p>本月关键业务指标分析...</p>
        </div>
        <div class="section">
          <h2>用户增长</h2>
          <p>用户增长趋势和渠道分析...</p>
        </div>
        <div class="section">
          <h2>收入分析</h2>
          <p>收入来源和利润分析...</p>
        </div>
        <div class="section">
          <h2>预测模型</h2>
          <p>基于历史数据的未来预测...</p>
        </div>
      `
    };

    const Page3 = {
        template: `
        <div class="section">
          <h2>页面三 - 项目进度</h2>
          <p>当前所有项目的进展情况...</p>
        </div>
        <div class="section">
          <h2>项目A</h2>
          <p>项目A的详细进度和里程碑...</p>
        </div>
        <div class="section">
          <h2>项目B</h2>
          <p>项目B的资源分配和风险分析...</p>
        </div>
        <div class="section">
          <h2>项目C</h2>
          <p>项目C的时间线和交付计划...</p>
        </div>
        <div class="section">
          <h2>项目D</h2>
          <p>项目D的质量控制和测试结果...</p>
        </div>
      `
    };

    const Page4 = {
        template: `
        <div class="section">
          <h2>页面四 - 设置中心</h2>
          <p>系统配置和个人偏好设置...</p>
        </div>
        <div class="section">
          <h2>账户设置</h2>
          <p>修改密码、安全设置等...</p>
        </div>
        <div class="section">
          <h2>通知偏好</h2>
          <p>配置接收通知的方式和频率...</p>
        </div>
        <div class="section">
          <h2>隐私设置</h2>
          <p>管理您的数据和隐私选项...</p>
        </div>
        <div class="section">
          <h2>系统信息</h2>
          <p>查看系统版本和更新信息...</p>
        </div>
      `
    };

    // 路由配置
    const routes = [
        { path: '/', redirect: '/page1' },
        { path: '/page1', component: Page1 },
        { path: '/page2', component: Page2 },
        { path: '/page3', component: Page3 },
        { path: '/page4', component: Page4 }
    ];

    // 创建路由实例
    const router = createRouter({
        history: createWebHistory(),
        routes
    });

    // 创建Vue应用
    const app = createApp({
        setup() {
            const routeHistory = ref([]);
            const historyIndex = ref(0);
            const scrollPositions = ref({});
            const navigationType = ref(null);
            const contentPanel = ref(null);
            const currentScrollPosition = ref(0);

            // 导航到指定路由
            const navigateTo = (path) => {
                router.push(path);
            };

            // 后退
            const goBack = () => {
                router.go(-1);
            };

            // 前进
            const goForward = () => {
                router.go(1);
            };

            // 更新滚动位置显示
            const updateScrollPosition = () => {
                if (contentPanel.value) {
                    currentScrollPosition.value = contentPanel.value.scrollTop;
                }
            };

            // 设置滚动位置
            const setScrollPosition = (position) => {
                if (contentPanel.value) {
                    contentPanel.value.scrollTop = position;
                }
            };

            // 滚动到顶部
            const scrollToTop = () => {
                setScrollPosition(0);
            };

            // 监听滚动事件
            const handleScroll = () => {
                updateScrollPosition();
            };

            // 组件挂载时添加滚动监听
            onMounted(() => {
                if (contentPanel.value) {
                    contentPanel.value.addEventListener('scroll', handleScroll);
                }
            });

            // 组件卸载时移除滚动监听
            onUnmounted(() => {
                if (contentPanel.value) {
                    contentPanel.value.removeEventListener('scroll', handleScroll);
                }
            });

            // 路由导航守卫
            router.beforeEach((to, from) => {
                if (from.path !== '/') {
                    // 保存离开页面的滚动位置
                    scrollPositions.value[from.path] = currentScrollPosition.value;

                    // 判断导航类型
                    if (routeHistory.value[historyIndex.value - 1] === to.path) {
                        // 后退
                        navigationType.value = '后退';
                        historyIndex.value--;
                    }
                    else if (routeHistory.value[historyIndex.value + 1] === to.path) {
                        // 前进
                        navigationType.value = '前进';
                        historyIndex.value++;
                    }
                    else {
                        // 新路由
                        navigationType.value = '新路由';
                        // 清除当前索引后的历史
                        routeHistory.value.splice(historyIndex.value + 1);
                        routeHistory.value.push(to.path);
                        historyIndex.value = routeHistory.value.length - 1;
                    }
                } else {
                    // 初始导航
                    navigationType.value = '初始导航';
                    routeHistory.value.push(to.path);
                    historyIndex.value = 0;
                }

                return true;
            });

            // 路由解析后设置滚动位置
            router.afterEach((to) => {
                nextTick(() => {
                    if (navigationType.value === '新路由' || navigationType.value === '初始导航') {
                        // 新路由滚动到顶部
                        scrollToTop();
                    } else {
                        // 恢复保存的滚动位置
                        const savedPosition = scrollPositions.value[to.path] || 0;
                        setScrollPosition(savedPosition);
                    }
                });
            });

            return {
                routeHistory,
                historyIndex,
                scrollPositions,
                navigationType,
                contentPanel,
                currentScrollPosition,
                navigateTo,
                goBack,
                goForward
            };
        }
    });

    app.use(router);
    app.mount('#app');
</script>
</body>
</html>